<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="./lib/fixed/index.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
    <title>添加/删除覆盖物</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4oEcXoOBVKCGS5DXptYAF6UKkBFyqCuT"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
    <style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#allmap,#l-map{height:500px;width:100%;}
		#r-result{width:100%;}
	</style>
</head>
<body>
        <!-- <div id="allmap"></div>
        <input type="button" onclick="deletePoint()" value="删除id=1"/> -->
        <!-- <div id="r-result">
            <input type="button" onclick="add_overlay();" value="添加覆盖物" />
            <input type="button" onclick="remove_overlay();" value="删除覆盖物" />
        </div> -->

        <!-- <div id="l-map"></div>
        <div id="r-result">
            <input type="button" onclick="marker.enableDragging();" value="可拖拽" />
            <input type="button" onclick="marker.disableDragging();" value="不可拖拽" />
        </div> -->

        <!-- 设置线、面可编辑 移动端不可编辑-->
        <!-- <div id="allmap"></div>
        <div id="control">
            <button onclick = "polygon.enableEditing();">开启线、面编辑功能</button>
            <button onclick = "polygon.disableEditing();">关闭线、面编辑功能</button>
        </div> -->

        <!-- 设置覆盖物的显示与隐藏 -->
        <!-- <div id="l-map"></div>
        <div id="r-result">
            <input type="button" onclick="showOver()" value="显示" />
            <input type="button" onclick="hideOver()" value="隐藏" />
        </div> -->
        
        <!-- 添加弧线 -->
        <div style="width:100%;height:100%;border:1px solid gray" id="container"></div>
    <script>

        /*

        // 百度地图API功能
	    var map = new BMap.Map("allmap");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(119.250093,26.10629), 15);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]
        }));
        map.setCurrentCity("福州");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        */

        /* //异步加载地图
        function loadJScript(){
            var script = document.createElement('script')
            script.type = 'text/javascript'
            script.src = 'http://api.map.baidu.com/api?v=2.0&ak=4oEcXoOBVKCGS5DXptYAF6UKkBFyqCuT&callback=init'
            document.body.appendChild(script)
        }
        function init(){
            var map = new BMap.Map("allmap");   // 创建Map实例
            var point = new BMap.Point(119.250093,26.10629) // 创建点坐标
            map.centerAndZoom(point,15)
            map.enableScrollWheelZoom() //启用滚轮放大缩小
        }
        window.onload = loadJScript
        */

        /* //根据城市名设置地图中心点
        var map = new BMap.Map('allmap');
        map.centerAndZoom('上海',15)
        */
        
        /*  //设置地图最大、最小级别 
        var map = new BMap.Map('allmap',{minZoom:4,maxZoom:15})  // 创建Map实例,设置地图允许的最小/大级别
        map.centerAndZoom(new BMap.Point(119.250093,26.10629),15)
        map.enableScrollWheelZoom(true)
        */

        
        /* //移动地图
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.250093,26.10629),15)
        setTimeout(function(){
            map.panTo(new BMap.Point(119.279104,26.086745))
        },2000)
        */

        /*  //缩放地图
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.279104,26.086745),8)
        setTimeout(function(){
            map.setZoom(15)
        },2000)
        map.enableScrollWheelZoom(true)
        */

        /* // 拖拽地图
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.279104,26.086745),8)
        map.enableScrollWheelZoom(true)
        map.disableDragging()   //禁止拖拽
        setTimeout(function(){
            map.enableDragging()
        },2000) */

        /* //设置地图显示范围
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.283835,26.080085),15)
        map.enableScrollWheelZoom()
        var b = new BMap.Bounds(new BMap.Point(119.268959,26.056199),new BMap.Point(119.298711,26.103966))
        try{
            BMapLib.AreaRestriction.setBounds(map,b)
        }catch(e){
            alert(e)
        } */

        /* // 获取地图显示范围
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.283835,26.080085),15)
        var bs = map.getBounds() //获取可视区域
        var bssw = bs.getSouthWest() //可视区域左下角
        var bsne = bs.getNorthEast() //可视区域右上角
        console.log('当前地图的可视范围是：' +bssw.lng +','+bssw.lat+'到'+bsne.lng+','+bsne.lat); */
        
        /* //测距
        var map = new BMap.Map('allmap')
        map.centerAndZoom('福州',15)
        var pointA = new BMap.Point(119.279104,26.086745)
        var pointB = new BMap.Point(119.249437,26.106967)
        console.log(map.getDistance(pointA,pointB).toFixed(2));
        var polyline = new BMap.Polyline([pointA,pointB],{strokeColor:'red',strokeWeight:6,strockOpacity:0.5})
        map.addOverlay(polyline) */
        
        /* // 关闭默认地图POI事件
        var map = new BMap.Map('allmap',{enableMapClick:false}) //构造底图时，关闭底图可点功能
        var point = new BMap.Point(119.249437,26.106967)
        map.centerAndZoom(point,15)
        map.enableScrollWheelZoom() */


        /* // 添加/删除工具条、比例尺控件
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.249437,26.106967),15)
        var top_left_control = new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});    //左上角，添加默认缩放平移控件
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
        //缩放控件type有四种类型:    BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮
    
        function add_control(){
            map.addControl(top_left_control)
            map.addControl(top_left_navigation)
            map.addControl(top_right_navigation)
        }
        function delete_control(){
            map.removeControl(top_left_control)
            map.removeControl(top_left_navigation)
            map.removeControl(top_right_navigation)
        } */

        /* // 添加/删除地图类型、缩略图控件
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.249437,26.106967),15)
        var mapType1 = new BMap.MapTypeControl({
            mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP],
            anchor:BMAP_ANCHOR_TOP_LEFT
        })
        var overView = new BMap.OverviewMapControl()
        var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT});
        //添加地图类型和缩略图
        function add_control(){
            map.addControl(mapType1);          //2D图，混合图
            map.addControl(overView);          //添加默认缩略地图控件
            map.addControl(overViewOpen);      //右下角，打开
        }
        //移除地图类型和缩略图
        function delete_control(){
            map.removeControl(mapType1);   //移除2D图，混合图
            map.removeControl(overView);
            map.removeControl(overViewOpen);
        } */

        /* //添加定位相关控件
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.249437,26.106967),15)
        // 添加带有定位的导航控件
        var navigationControl = new BMap.NavigationControl({
            // 靠左上角位置
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // LARGE类型
            type: BMAP_NAVIGATION_CONTROL_LARGE,
            // 启用显示定位
            enableGeolocation: true
        })
        map.addControl(navigationControl);
        var geolocationControl = new BMap.GeolocationControl()
        geolocationControl.addEventListener('locationSuccess',function(e){
            // 定位成功事件
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            console.log(address);
        })
        geolocationControl.addEventListener("locationError",function(e){
            // 定位失败事件
            console.log(e.message);
        });
        map.addControl(geolocationControl) */

        /* //添加版权控件
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.249437,26.106967),15)
        var cr = new BMap.CopyrightControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT
        })
        //设置版权控件位置
        map.addControl(cr) //添加版权控件
        var bs = map.getBounds()    //返回地图可视区域
        cr.addCopyright({id:1,content:"<a href='#' style='font-size:20px;background:yellow'>友洗环保</a>",bounds:bs})
        //Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数 */

        /* // 添加自定义控件
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.249437,26.106967),15)

        function ZoomControl(){
            // 默认停靠位置和偏移量
            this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
            this.defaultOffset = new BMap.Size(10, 10);
        }

        // 通过JavaScript的prototype属性继承于BMap.Control
        ZoomControl.prototype = new BMap.Control();
        
        // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
	    // 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中 

        ZoomControl.prototype.initialize = function(map){
            // 创建一个DOM元素
            var div = document.createElement("div");
             // 添加文字说明
            div.appendChild(document.createTextNode("放大2级"));
            // 设置样式
            div.style.cursor = "pointer";
            div.style.border = "1px solid gray";
            div.style.backgroundColor = "white";
            // 绑定事件,点击一次放大两级
            div.onclick = function(e){
                map.setZoom(map.getZoom() + 2);
            }
            // 添加DOM元素到地图中
            map.getContainer().appendChild(div);
            // 将DOM元素返回
            return div;
        }
        // 创建控件
        var myZoomCtrl = new ZoomControl();
        // 添加到地图当中
        map.addControl(myZoomCtrl); */
        
        /* // 城市列表控件
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.249437,26.106967)
        map.centerAndZoom(point,15)
        map.enableScrollWheelZoom()
        map.enableInertialDragging()
        map.enableContinuousZoom()
        var size = new BMap.Size(10,20)
        map.addControl(new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: size,
            // 切换城市之间事件
            onChangeBefore: function(){
               alert('before');
            },
            // 切换城市之后事件
            onChangeAfter:function(){
              alert('after');
            }
        })) */

        /* // 添加/删除覆盖物
        var data = {strokeColor:'blue',strokeWeight:2,strokeOpacity:0.5}
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        var marker = new BMap.Marker(new BMap.Point(119.279104,26.086745))
        var polyline = new BMap.Polyline([
            new BMap.Point(119.277878,26.086323),
            new BMap.Point(119.279066,26.087505),
            new BMap.Point(119.281067,26.085195)],
            {strokeColor:'blue',strokeWeight:2,strokeOpacity:0.5})  //创建折线
        var circle = new BMap.Circle(point,500,data)   //创建圆
        var polygon = new BMap.Polygon([
            new BMap.Point(119.277712,26.084453),
            new BMap.Point(119.278498,26.083727),
            new BMap.Point(119.280129,26.083934),
            new BMap.Point(119.280129,26.083934),
            new BMap.Point(119.280219,26.085873)],
            data)
            
        var pstart = new BMap.Point(119.282509,26.084206)
        var end = new BMap.Point(119.281337,26.082827)
        var rectangle = new BMap.Polygon([
            new BMap.Point(pstart.lng,pstart.lat),
            new BMap.Point(end.lng,pstart.lat),
            new BMap.Point(end.lng,end.lat),
            new BMap.Point(pstart.lng,end.lat)],
            data);  //创建矩形
        function add_overlay(){
            map.addOverlay(marker)
            map.addOverlay(polyline)
            map.addOverlay(circle)
            map.addOverlay(polygon)
            map.addOverlay(rectangle)
        }
        function remove_overlay(){
            map.clearOverlays()
        } */

        /* // 折线上添加方向箭头
        var map = new BMap.Map('allmap') // 创建Map实例
        map.centerAndZoom(new BMap.Point(119.279104,26.086745),18)  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
        var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
            scale: 0.6,//图标缩放大小
            strokeColor:'#fff',//设置矢量图标的线填充颜色
            strokeWeight: '2',//设置线宽
        });
        var icons = new BMap.IconSequence(sy, '10', '30');
        // 创建polyline对象
        var pois = [
            new BMap.Point(119.277065,26.085877),
            new BMap.Point(119.280147,26.086481),
            new BMap.Point(119.280726,26.085309),
            new BMap.Point(119.278736,26.084583)
        ];

        var polyline =new BMap.Polyline(pois, {
            enableEditing: false,//是否启用线编辑，默认为false
            enableClicking: true,//是否响应点击事件，默认为true
            icons:[icons],
            strokeWeight:'8',//折线的宽度，以像素为单位
            strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
            strokeColor:"#18a45b" //折线颜色
        });

        map.addOverlay(polyline);          //增加折线 */

        /* // 添加动画标注点,移动端不可用
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        var marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker)
        marker.setAnimation(BMAP_ANIMATION_BOUNCE) //跳动的动画 */

        /* // 设置点的新图标
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        //创建小狐狸
        var pt = new BMap.Point(119.279104,26.086745);
        var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
        var marker = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中 */

        /* // 设置点是否可拖拽
        var map = new BMap.Map('l-map')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,12)
        var myIcon = new BMap.Icon('./images/default_cooperation.png',new BMap.Size(44,66))
        var marker = new BMap.Marker(point,{icon:myIcon})   // 创建标注
        map.addOverlay(marker)  // 将标注添加到地图中
        marker.disableDragging();           // 不可拖拽 */

        /* // 设置线、面可编辑
        var map = new BMap.Map('allmap')
        map.centerAndZoom(new BMap.Point(119.279104,26.086745),18)
        map.enableScrollWheelZoom();

        var polygon = new BMap.Polygon([
            new BMap.Point(119.277892,26.086335),
            new BMap.Point(119.278539,26.087718),
            new BMap.Point(119.280493,26.086883),
            new BMap.Point(119.280497,26.086307),
            new BMap.Point(119.279693,26.085232),
        ],{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5})  //创建多边形
        map.addOverlay(polygon);   //增加多边形 */

        /* // 设置覆盖物的显示与隐藏
        var map = new BMap.Map('l-map')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point, 15);
        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);              // 将标注添加到地图中
        function showOver(){
            marker.show();
        }
        function hideOver(){
            marker.hide();
        } */
        /* // 文本标注
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,20);
        var opts = {
            position : point,    // 指定文本标注所在的地理位置
	        offset   : new BMap.Size(30, -30)    //设置文本偏移量
        }
        var label = new BMap.Label('欢迎使用百度地图，这是一个简单的文本标注哦~',opts)  // 创建文本标注对象
        label.setStyle({
            color : "red",
            fontSize : "12px",
            height : "20px",
            lineHeight : "20px",
            fontFamily:"微软雅黑"
        })
        map.addOverlay(label);   */

        /* // 带文字标签的覆盖物
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        var marker = new BMap.Marker(point) // 创建标注
        map.addOverlay(marker)  // 将标注添加到地图中
        var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); */
        
        /* // 获取覆盖物的信息
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        var marker = new BMap.Marker(point)
        map.addOverlay(marker)
        marker.addEventListener('click', getAttr)
        function getAttr(){
            var p = marker.getPosition()
            console.log("marker的位置是" + p.lng + "," + p.lat);
        } */
        

        /* // 添加多个标注点
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        // 编写自定义函数,创建标注
        var myIcon = new BMap.Icon('./images/default_cooperation.png',new BMap.Size(44,66))
        function addMarker(point){
            var marker = new BMap.Marker(point,{icon:myIcon})
            map.addOverlay(marker)
        }
        // 随机向地图添加25个标注
        var bounds = map.getBounds()
        var sw = bounds.getSouthWest()
        var ne = bounds.getNorthEast()
        var lngSpan = Math.abs(sw.lng-ne.lng)
        var latSpan = Math.abs(ne.lng-sw.lng)
        for (var i = 0; i < 25; i ++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
		    addMarker(point);
	    } */

        /* // 从多个点删除指定点
        var map = new BMap.Map('allmap')
        var point = new BMap.Point(119.279104,26.086745)
        map.centerAndZoom(point,15)
        map.disableDoubleClickZoom()
        // 编写自定义函数,创建标注
        function addMarker(point,label){
            var marker = new BMap.Marker(point)
            map.addOverlay(marker)
            marker.setLabel(label)
        }

        // 随机向地图添加25个标注
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var lngSpan = Math.abs(sw.lng - ne.lng);
        var latSpan = Math.abs(ne.lat - sw.lat);
        for (var i = 0; i < 10; i++) {
            var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7));
            var label = new BMap.Label("我是id="+i,{offset:new BMap.Size(20,-10)});
            addMarker(point,label);
        }

        function deletePoint(){
            var allOverlay = map.getOverlays();
            for (var i = 0; i < allOverlay.length -1; i++){
                if(allOverlay[i].getLabel().content == "我是id=1"){
                    map.removeOverlay(allOverlay[i]);
                    return false;
                }
            }
        } */

        var map = new BMap.Map('container')
        map.centerAndZoom(new BMap.Point(119.279104,26.086745),6)
        map.enableScrollWheelZoom()
        var beijingPosition = new BMap.Point(116.432045,39.910683),
            hanzhouPosition = new BMap.Point(120.129721,30.314429),
            taiwanPosition = new BMap.Point(121.491121,25.127053);
        var points = [beijingPosition,hanzhouPosition,taiwanPosition]
        var curve = new BMapLib.CurveLine(points,{
            strokeColor:'blue',
            strokeWeight:3,
            strokeOpacity:0.5
        })
        map.addOverlay(curve)
        curve.enableEditing()
    </script>
</body>
</html>